<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="setView">
			<view class="top">
				<navPhoneBar></navPhoneBar>
				<view class="back" @click="handleBack">
					<image class="topImg" src="@/static/icons/arrowLeft.png" mode=""></image>
				</view> 
			</view>
			
			<view class="set">
				 
				<view class="inputDiv">
					<view class="inputlabel">
						手机号
					</view>
					<view class="input">
						{{userInfo.phone}}
					</view>
				</view>
				
				<view class="inputDiv">
					<view class="inputlabel">
						昵称
					</view>
					<view class="input">
						<input type="text"  v-model="userInfo.name" placeholder="请输入您的昵称"/>
					</view>
				</view>
			</view>
			
			<view class="set">
				<view class="label">主题</view>
				<view class="option" @click="changeTheme('dark')">
					<view>
						深色(dark)
					</view>
					<image :class="{checkIcon:true,active:dataTheme=='dark'}" src="@/static/icons/check.png" mode="">
					</image>
				</view>
				<view class="option" @click="changeTheme('light')">
					<view>
						浅色(light)
					</view>
					<image :class="{checkIcon:true,active:dataTheme=='light'}" src="@/static/icons/check.png" mode="">
					</image>
				</view>
			</view>
			
			<commonButton class="bottomButton" @tapclick="handleSaveUserInfor">
				<view class="saveButton">
					<text>保</text><text>存</text> 
				</view> 
			</commonButton>
		</view>
		
		<toastBox v-model="showToast" :title="toastData.title" :detail="toastData.detail"></toastBox>
	</view>
</template>

<script setup>
	import toastBox from '@/components/toastBox.vue'
	import{saveUserInfor} from '@/api/index.js'
	import commonButton from '@/components/commonButton.vue'
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme, 
		userInfo
	} = storeToRefs(systemStore);
	//toast弹框参数
	let showToast=ref(false)
	let toastData=ref({
		title:'',
		detail:''
	})
	
	
	
	//保存信息
	let handleSaveUserInfor=()=>{
		saveUserInfor(userInfo.value).then((re)=>{
			toastData.value.detail='保存成功'
			showToast.value=true
		})
		.catch(e=>{
			toastData.value.title='异常'
			toastData.value.detail='保存失败'
			showToast.value=false
		})
	}
	//更改主题
	let changeTheme = (type) => {
		if (type == dataTheme.value)
			return
	
		dataTheme.value = type
	}
	//关闭弹框
	let handleBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.bodyView {
		width: 100vw;
		height: 100vh;
	}
	
	.setView {
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		padding: 0 $mainPadding;
		overflow-y: auto;
		overflow-x: hidden;
		@include flex-teng(column, flex-start);
		@include useTheme {
			background-color: getValue("bgColor");
			color: getValue("textColor");
		}
		
		.top { 
			width: 100%; 
			z-index: 111;
		 
			.back {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				//margin-left: $mainPadding;
				@include flex-teng;
		
				@include useTheme {
					background-color: getValue("bottombgColor");
				}
		
				.topImg {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		
		.set {
			box-sizing: border-box;
			margin-top: $mainPadding;
			padding: $mainPadding 30rpx;
			width: 100%;
			border-radius: 40px; 
			@include useTheme {
				background-color: getValue('bottombgColor');
			}
		
			.label {
				font-size: $fontSize;
			}
			.inputDiv{
				.inputlabel{
					font-size: $fontSize2;
				}
				.input{
					margin-top: calc( $mainPadding / 2);
					margin-bottom:  $mainPadding;
					border-radius: 40px;
					border-bottom: 1px solid rgba(143, 143, 143, 0.6); 
					padding: $mainPadding ;
					@include useTheme {
						 
						color: getValue('textColor2');
					}
					input{
						@include useTheme { 
							color: getValue('textColor2');
						}
					}		
				}
			}
			
		
			.option {
				padding: $mainPadding;
				font-size: $fontSize2;
				border-bottom: 1px solid rgba(143, 143, 143, 0.6);
				@include flex-teng(row, space-between);
		
				.checkIcon {
					width: 43rpx;
					height: 48rpx;
					transition: all 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
					transform: scale(0);
					opacity: 0;
		
					&.active {
						transform: scale(1);
						opacity: 1;
					}
				}
				
				&.pro{
					flex-direction: column !important;
					row-gap: 10rpx;
				}
				.bottomInfo{
					width: 100%;
					font-size: $fontSize3;
					@include flex-teng(row,space-between);
				}
				 
			}
		}
	
		.bottomButton{
			margin-top: $mainPadding;
			width: 100%;
			border-radius: 20px;
			background-color: $mainColor;
			overflow: hidden;
			.saveButton{
				
				width: 100%;
				height: 60px;
				
				@include flex-teng;
				column-gap:$mainPadding;
				 
				font-size: $fontSize;
			}
		}
		
	}
</style>